<template>
    <div class="document-left">
        <div class="document-left-show" :class="[catalogueType == false?'showTwo':'hiddenTwo']" @click="loadCatalogueShow">
            <span class="document-left-show-title">文</span>
            <span class="document-left-show-title">档</span>
        </div>
        <div class="menu-handle-bar">
            <div v-if="catalogueType == true" class="menu-handel-bar-itembox" @click="loadCatalogueHidden">
                <i class="menu-handel-bar-itembox-icon el-icon-arrow-left"></i>
            </div>
        </div>
        <div class="document-left-content" :class="[catalogueType == true?'show':'hidden']">
            <div class="document-left-function">
                <div class="document-left-function-item" v-for="(item,index) in functionForm">
                    <i class="document-left-function-item-icon" :class="item.icon"></i>
                    <span class="document-left-function-item-title" @click="loadFunction(index)" :class="[functionIndex == index?'choose-color':'']">{{item.title}}</span>
                </div>
            </div>
            <div class="document-left-tree">
                <el-tree ref="asyncTree" :data="treeData" :key="times" lazy :load="loadNode" :props="props" node-key="id" :expand-on-click-node="false" @node-click="nodeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <img v-if="data.src" class="svg-icon" :src="data.src">
                        <img v-else class="svg-icon" :src="node.expanded?flatFileIcon:folderIcon">
                        <el-tooltip class="item" effect="dark" :content="data.label" placement="left">
                            <span class="document-left-tree-span">{{ data.label }}</span>
                        </el-tooltip>
                        <!-- v-if="data.data.dirLevel > 0" -->
                        <div class="document-left-tree-iconBox">
                            <popover :treeData='data' @updateTree="updateTree" :dircontract='dircontract'></popover>
                        </div>
                    </span>
                </el-tree>
            </div>
        </div>
    </div>
</template>

<script>
import popover from "../../document/components/popover.vue";
import { getTreeData, dirIsLeaf } from "@/api/dir.js";
import utils from "../../../../utils/utils.js";
import permissionFunc from "../../../../utils/permission";
// import Bus from '@/utils/bus.js';
export default {
    data() {
        return {
            dircontract: true,
            treeData: [
                {
                    id: -1,
                    label: "项目合同",
                    src:
                        require("../../../../img/0aa34d50b616e6482cfb8ea7cf251d5b.svg"),
                    children: null,
                    isLeaf: true,
                    data: {
                        dirLevel: 0,
                        dirType: "00",
                    },
                },
                // {
                //     id: -3,
                //     label: "产品",
                //     src: "",
                //     children: null,
                //     isLeaf: true,
                //     data: {
                //         dirLevel: 0,
                //         dirType: "02",
                //     },
                // },
                {
                    id: -5,
                    label: "普通合同",
                    src:
                        require("../../../../img/0aa34d50b616e6482cfb8ea7cf251d5b.svg"),
                    children: null,
                    isLeaf: true,
                    data: {
                        dirLevel: 0,
                        dirType: "05",
                    },
                },
                // {
                //     id: -4,
                //     label: "我的文档",
                //     src: "",
                //     children: null,
                //     isLeaf: true,
                //     data: {
                //         dirLevel: 0,
                //         dirType: "04",
                //     },
                // },
                // {
                //     id: -6,
                //     label: "知识库",
                //     src: "",
                //     children: null,
                //     isLeaf: true,
                //     data: {
                //         dirLevel: 0,
                //         dirType: "06",
                //     },
                // },
            ],
            times: null,
            catalogueLoading: false,
            functionForm: [
                {
                    title: "最近编辑的",
                    icon: "el-icon-time",
                },
                {
                    title: "我创建的",
                    icon: "el-icon-user",
                },
                {
                    title: "我收藏的",
                    icon: "el-icon-star-off",
                },
                {
                    title: "回收站",
                    icon: "el-icon-delete",
                },
            ],
            functionIndex: -1,
            catalogueType: true,
            folderIcon:
                require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            flatFileIcon:
                require("../../../../img/53291f9df1685d566be7cc967d80d249.svg"),
            cataloguesrc:
                require("../../../../img/0aa34d50b616e6482cfb8ea7cf251d5b.svg"),
            listQuary: {
                current: 1,
                level: 0,
                parentId: "",
                dirType: "",
            },
            props: {
                isLeaf: "isLeaf",
                label: "label",
                children: [],
            },
        };
    },
    components: {
        popover,
    },
    props: ["documentType"],
    created() {
        var _this = this;
        _this.dirIsLeaf();
        this.$EventBus.$on("eventName", (data) => {
            _this.updateTree(data);
        });
        this.$EventBus.$on("dircontChange", (data) => {
            if (!utils.isNull(data)) {
                _this.dirIsLeaf();
            }
        });
    },
    beforeDestroy() {
        this.$EventBus.$off("eventName");
        console.log("我进来了");
    },
    methods: {
        // 查询各父节点下是否有叶子
        dirIsLeaf() {
            var _this = this;
            _this.catalogueLoading = true;
            dirIsLeaf(false)
                .then((res) => {
                    if (res.data.length > 0) {
                        // if (_this.permissionQuery() == true) {

                        // } else {
                        //     // _this.treeData.splice(2,1)
                        //     res.data.forEach(function (item) {
                        //         if (item.dirType == "00") {
                        //             _this.treeData[0].isLeaf = false;
                        //         } else if (item.dirType == "02") {
                        //             _this.treeData[1].isLeaf = false;
                        //         } else if (item.dirType == "04") {
                        //             _this.treeData[2].isLeaf = false;
                        //         } else if (item.dirType == "06") {
                        //             _this.treeData[3].isLeaf = false;
                        //         }
                        //     });
                        // }
                        res.data.forEach(function (item) {
                            if (item.dirType == "00") {
                                _this.treeData[0].isLeaf = false;
                            }
                            // else if (item.dirType == "02") {
                            //     _this.treeData[1].isLeaf = false;
                            // } else if (item.dirType == "04") {
                            //     _this.treeData[2].isLeaf = false;
                            // } else if (item.dirType == "06") {
                            //     _this.treeData[3].isLeaf = false;
                            // }
                            else if (item.dirType == "05") {
                                _this.treeData[1].isLeaf = false;
                            }
                        });
                        _this.times = new Date().getTime();
                    }
                    console.log(_this.treeData);
                    _this.catalogueLoading = false;
                })
                .catch((error) => {
                    _this.catalogueLoading = false;
                });
        },
        // 加载叶子
        loadNode(node, resolve) {
            var _this = this;
            if (node.level === 0) {
                resolve(node.data);
            }
            if (node.level >= 1) {
                var id = "";
                _this.listQuary.level = Number(node.data.data.dirLevel) + 1;
                _this.listQuary.dirType = node.data.data.dirType;
                _this.listQuary.parentId = node.data.id;
                if (node.data.data.dirLevel > 0) {
                    _this.catalogueLoading = true;
                    getTreeData(_this.listQuary, false)
                        .then((res) => {
                            console.log(res);
                            console.log(node);
                            _this.catalogueLoading = false;
                            resolve(res.data.data);
                        })
                        .catch((error) => {
                            _this.catalogueLoading = false;
                        });
                } else {
                    _this.catalogueLoading = true;
                    getTreeData(
                        {
                            dirType: node.data.data.dirType,
                        },
                        false
                    )
                        .then((res) => {
                            console.log(res.data.data);
                            console.log(node);
                            _this.catalogueLoading = false;
                            resolve(res.data.data);
                        })
                        .catch((error) => {
                            _this.catalogueLoading = false;
                        });
                }
            }
        },
        // 更新树节点
        updateTree(data) {
            console.log("我来更新节点");
            console.log(data);
            var _this = this;
            let node = "";
            if (data.data.parentDirId) {
                node = this.$refs.asyncTree.getNode(data.data.parentDirId); // 通过节点id找到对应树节点对象
            } else {
                var parentId = "";
                if (data.data.dirType == "00") {
                    parentId = "-1";
                } else if (data.data.dirType == "05") {
                    parentId = "-5";
                }
                // else if (data.data.dirType == "01") {
                //     parentId = "-2";
                // } else if (data.data.dirType == "02") {
                //     parentId = "-3";
                // } else if (data.data.dirType == "04") {
                //     parentId = "-4";
                // } else if (data.data.dirType == "05") {
                //     parentId = "-5";
                // } else if (data.data.dirType == "06") {
                //     parentId = "-6";
                // }
                node = this.$refs.asyncTree.getNode(parentId); // 通过节点id找到对应树节点对象
            }
            node.loaded = false;
            node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
        },
        // 点击选择节点
        nodeClick(data) {
            // console.log(data);
            if (this.functionIndex != -1) {
                this.functionIndex = -1;
            }
            this.$emit("nodeChoose", data);
        },
        // 回收站等方法
        loadFunction(index) {
            var _this = this;
            _this.functionIndex = index;
            _this.$emit("fileFunction", index);
        },
        // 侧边框展开隐藏
        loadCatalogueShow() {
            this.catalogueType = true;
        },
        loadCatalogueHidden() {
            this.catalogueType = false;
        },
        permissionQuery() {
            return permissionFunc.inserted(["app:contract:index"]);
        },
    },
};
</script>

<style scoped>
.document-left {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    flex: 0 0 auto;
    position: relative;
    height: calc(100vh - 84px);
}

.document-left-content {
    /* overflow: hidden; */
}

.show {
    width: 232px;
    transition: all 0.5s;
    overflow-y: auto;
    overflow-x: hidden;
}

.hidden {
    width: 30px;
    transition: all 0.5s;
    overflow: hidden;
}

.document-left-function {
    padding: 24px;
    border-bottom: 1px solid #dadee3;
    width: 232px;
    box-sizing: border-box;
}

.document-left-function-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #5f6d84;
    cursor: pointer;
}

.document-left-function-item-icon {
    font-size: 16px;
    color: #c1c7d0;
    margin-right: 12px;
}

.document-left-function-item-title {
    font-size: 14px;
}

.document-left-function-item:hover {
    color: #2c7ef8;
}

.choose-color {
    color: #2c7ef8;
}

.menu-handle-bar {
    position: absolute;
    top: 0px;
    right: -10px;
    width: 10px;
    height: calc(100vh - 84px);
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 1px solid #dadee3;
}

.menu-handel-bar-itembox {
    width: 12px;
    height: 56px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-handle-bar:hover > .menu-handel-bar-itembox {
    background-color: #2c7ef8;
}

.menu-handel-bar-itembox-icon {
    font-size: 12px;
    color: white;
}

.document-left-tree {
    padding: 20px;
    position: relative;
    width: 232px;
    overflow: hidden;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    /* padding-right:20px; */
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-tree-node:hover {
    color: #909baa;
    padding-right: 22px;
}

.svg-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
}

.document-left-tree-span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5f6d84;
    font-size: 14px;
}

.document-left-tree-more {
    font-size: 12px;
}

.document-left-tree-iconBox {
    position: absolute;
    right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.document-left-show {
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: white;
    z-index: 99;
}

.document-left-show-title {
    font-size: 12px;
    color: #909aaa;
    margin-top: 10px;
}

.showTwo {
    opacity: 1;
    transition: all 0.5s;
}

.hiddenTwo {
    opacity: 0;
    transition: all 0.5s;
}
</style>
